<style scoped>
    .buttonLogin {
        margin-left: 20px;
        margin-top: 10px;
        width: calc(100% - 40px);

    }

    .pLogin {
        margin-top: 10px;
        color: #999;
    }
</style>

<template>
    <div style="padding: 10px;background-color: #dfe2e5;">

        <van-cell-group>
            <van-field
                    v-model="userId"
                    required
                    clearable
                    label="用户名"
                    placeholder="请输入用户名"
                    :error-message=userIdMsg
            />

            <van-field
                    v-model="password"
                    type="password"
                    label="密码"
                    placeholder="请输入密码"
                    required
            />
            <van-field
                    v-model="checkPassword"
                    type="password"
                    label="确认密码"
                    placeholder="请再次输入密码"
                    required
                    :error-message=checkPasswordMsg
            />
        </van-cell-group>
        <p class="pLogin">
            <van-icon name="fail" style="color: #ff113a"/>
            温馨提示：用户注册账号推荐使用手机号码
        </p>
        <van-button type="primary" size="normal" class="buttonLogin" @click="registerUser">注册</van-button>
    </div>
</template>

<script>
    export default {
        name: "WeChatRegister",
        data() {
            return {
                userId: '',
                password: '',
                checkPassword:'',
                userIdMsg:"",
                checkPasswordMsg:""
            }
        },
        methods:{
            registerUser(){
                let self = this;
                this.$http({
                    headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
                    transformRequest: [data => self.$qs.stringify(data)],
                    method: 'post',
                    url: '/core/userInfo/registerUser',
                    data: {
                        userId: self.userId,
                        userName: self.userId,
                        password:self.password
                    }
                }).then(function (response) {
                    self.$Message.info({
                        content: response.data.message,
                        duration: 5
                    });
                    setTimeout(function () {

                        window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx281e7d59de450db4&redirect_uri=http%3a%2f%2feternal.nat100.top%2f%23%2fweChatLogin&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
                    },2000)
                }).catch(function (error) {

                    self.$Message.error({
                        content: error.response.data.message,
                        duration: 10
                    });
                });
            },


        },
        watch: {
            checkPassword: function (val) {
                let self=this;
                if(self.password!=self.checkPassword){
                    self.checkPasswordMsg="密码输入不一致";
                }else{
                    self.checkPasswordMsg="";
                }
            },

        }
    }
</script>

